<template>
  <div style="margin-top: 10px">
    <!--  布局  -->
    <el-container>
      <el-header>
        <div>
          <el-select class="item" v-model="belongEnd"
                     @change="onSelectedBelongEnd($event)"
                     filterable clearable placeholder="-请选择端-">
            <el-option
                v-for="item in belongEndList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>

          <el-select class="item" v-model="appId"
                     @change="onSelectedApp($event)"
                     filterable clearable placeholder="-请选择应用-">
            <el-option
                v-for="item in appList"
                :key="item.id"
                :label="item.appName"
                :value="item.id">
            </el-option>
          </el-select>

          <el-button icon="el-icon-refresh" style="display: inline-flex;margin-left: 8px; margin-top: 15px; float: right" type="primary"
                     @click="flushTable"></el-button>

          <el-select v-model="env" style="margin-left: 10px; float: right; width: 100px;"
                     @change="onSelectedEnv($event)"
                     filterable>
            <el-option
                v-for="item in envList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>

          <span style="float: right">
            当前文档地址：
            <a :href="swaggerUrl" target="_blank">
              <el-tag>{{swaggerUrl}}</el-tag>
            </a>
          </span>
        </div>
      </el-header>
      <el-main>
        <iframe class="swagger" :src="swaggerUrl"></iframe>
      </el-main>
    </el-container>
  </div>


</template>

<script>
import {Message} from "element-ui";
import {deepClone, unique} from "@/utils/tool";

export default {
  name: "SwaggerAggregate",
  data() {
    return {
      swaggerUrl: "http://10.210.2.80:8888/api/doc.html",
      envList: [{id: 'dev', name: '开发环境'}, {id: 'test', name: '测试环境'}, {id: 'local', name: '本地环境'}],
      belongEndList: [{id: 1, name: '企业端'}, {id: 2, name: '医端'}, {id: 3, name: '患端'}, {id: 4, name: '商业端' }, {id: 5, name: '中台'}],

      belongEnd: '',
      appId: '',
      env: 'dev',

      appList: [],

    }
  },

  mounted() {
    this.initAppList();
  },

  methods: {
    // 调用后端【getList】接口获取表格数据
    initAppList() {
      this.getRequest("/appManage/getList", {belongEnd: this.belongEnd, env: this.env}).then(resp => {
        this.loading = true;
        if (resp && resp.status === 200) {
          this.appList = resp.data;
          // 去重处理(按需设定，可将需要去重的值设置给id属性)
          const tempList = deepClone(this.appList);
          let list = tempList.map((item,index) => {
            return {
              index: index,
              id: item.appName,
              name: item.swaggerUrl,
            };
          });
          // 根据id去重
          this.appList = unique(list);
        }
      })
    },

    onSelectedBelongEnd(eventId) {
      this.appList = [];
      if (!eventId) {
        this.belongEnd = '';
        return false;
      }
      this.belongEnd = eventId;
      this.initAppList();
    },

    onSelectedApp(eventId) {
      if (!eventId) {
        this.appId = '';
        return false;
      }
      let obj = this.appList.find(item=>{
        return item.id === eventId;
      });
      this.appId = eventId;
      this.swaggerUrl = obj.name;
    },

    onSelectedEnv(envId) {
      if (!envId) {
        this.env = '';
        this.initAppList();
        return;
      }
      this.env = envId;
      this.initAppList();
    },

    flushTable() {
      this.initAppList();
      Message.success("刷新成功");
    },

  }
}
</script>

<style scoped>
.el-header {
  background-color: #b8bdf3;
  color: #333;
  text-align: left;
  line-height: 60px;
}

.el-main {
  background-color: #b1f3ee;
  color: #333;
  text-align: center;
  line-height: 660px;
  display: flex;
  flex-direction: column;
}

iframe{
  height: 720px;
}

.item {
  margin-right: 10px;
}


</style>
